<template>
  <div class="h-full flex">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '详情',
                onClick: handleDetail.bind(null, record),
              },
              {
                label: '重置密码',
                onClick: handleReverse.bind(null, record),
              },
              {
                label: '删除',
                onClick: handleDelete.bind(null, record),
                ifShow: userStore.getUserInfo.avatar === '管理员',
              },
            ]"
          />
        </template>
      </template>
      <template #toolbar>
        <div class="flex">
          <a-button
            type="primary"
            class="flex items-center"
            @click="
              openDrawer(true, {
                title: '添加',
              })
            "
          >
            <PlusOutlined />
            添加
          </a-button>
        </div>
      </template>
    </BasicTable>
    <Drawer @register="register" @next="handleComplete" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';

  import { deleteUser, getSearchUser, resettingPassword } from '@/api/page/user_audit';
  import { useDrawer } from '@/components/Drawer';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useUserStore } from '@/store/modules/user';

  import Drawer from './component/Drawer.vue';
  import { getBasicColumns } from './data';

  const userStore = useUserStore();

  const { createConfirm, createMessage, createSuccessModal } = useMessage();

  const [register, { openDrawer }] = useDrawer();

  const list = ref<any[]>([]);
  // const checkedKeys = ref<Array<string | number>>([]);
  const [registerTable, { setTableData }] = useTable({
    title: '',
    dataSource: list.value,
    columns: getBasicColumns,
    // useSearchForm: true,
    // formConfig: getFormConfig(),
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
      // selectedRowKeys: checkedKeys as any,
      // onSelect,
      // onSelectAll,
    },
    actionColumn: {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });

  // function handleColumnChange(data: ColumnChangeParam[]) {
  //   console.log('ColumnChanged', data);
  // }
  async function handleGetSearchUser() {
    const data = await getSearchUser({});
    if (data.code === 1000) {
      setTableData(data.obj);
      list.value = data.obj;
    }
  }
  onMounted(() => {
    handleGetSearchUser();
  });

  function handleDelete(record) {
    createConfirm({
      iconType: 'info',
      title: () => '删除提醒',
      content: () => '确定要删除该内容吗？',
      onOk: () => {
        deleteUser({ id: record.id }).then((res) => {
          if (res.code === 1000) {
            createMessage.success('删除成功！');
            handleGetSearchUser();
          } else {
            createMessage.error('删除失败，请重试！');
          }
        });
      },
    });
  }
  function handleEdit(record) {
    openDrawer(true, {
      title: '编辑',
      record,
    });
  }
  function handleDetail(record) {
    openDrawer(true, {
      title: '详情',
      record,
      details: 'details',
    });
  }
  function handleReverse(record) {
    createConfirm({
      iconType: 'info',
      title: () => '重置密码提醒',
      content: () => '确定要重置密码吗？',
      onOk: () => {
        resettingPassword({ id: record.id }).then((res) => {
          if (res.code === 1000) {
            createSuccessModal({
              iconType: 'info',
              title: () => '重置成功',
              content: () => `新密码为：${res.obj.password}`,
            });
          } else {
            createMessage.error('重置密码失败，请重试！');
          }
        });
      },
    });
  }
  function handleComplete() {
    handleGetSearchUser();
  }
</script>
